<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="list" @click="gouser(item.id)">
					<view class="name-price tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="name">{{item.game_name}}</text>
						<view class="price">
							<text class="p1">{{item.min_price}}-{{item.max_price}}海豚币</text>
							<text class="p2">/局</text>
						</view>
					</view>
					<view class="tag tn-flex tn-flex-col-center">
						<view class="sex" :class="[{'girl':item.sex == 2}]">
							<image src="/static/index/nan.png" v-if="item.sex == 1" class="nan-icon" mode="">
							</image>
							<image src="/static/index/nv.png" v-if="item.sex == 2" class="nv-icon" mode=""></image>
							<text class="t1">{{item.sex == 1 ? '男' : '女'}}</text>
						</view>
					</view>
					<block v-for="(e,i) in item.tags" :key="i">
						<view class="introduce">{{e.name}}：{{e.option}}</view>
					</block>
					<view class="introduce">派单时间：{{item.exp_date}}</view>
					<view class="btn tn-flex tn-flex-row-right">
						<text>详情</text>
					</view>
				</view>
			</block>
			<w-load-more ref="wLoadMore"></w-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				show: false
			};
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			if (this.list.length < 20) return
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.getlist(1)
		},
		methods: {
			async getlist(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play_matching/play_matching',
						data: {
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = data
						this.show = true
					} else {
						this.list = this.list.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--

						}
					}
					console.log(result)
				} catch (e) {

				}
			},
			gouser(id) {
				uni.navigateTo({
					url: "/playcenterPage/gasp-user?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;

		.list {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;
			margin-bottom: 24rpx;

			.name-price {
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.price {
					font-weight: bold;

					.p1 {
						font-size: 30rpx;
						color: #e83a30;
					}

					.p2 {
						color: #333333ad;
						font-size: 24rpx;
					}
				}
			}

			.tag {
				margin-top: 12rpx;

				.sex {
					width: 82rpx;
					height: 34rpx;
					background: #69B7FD;
					border-radius: 6rpx;
					text-align: center;
					line-height: 34rpx;

					.nan-icon {
						width: 16rpx;
						height: 16rpx;
						margin-right: 6rpx;
					}

					.nv-icon {
						width: 14rpx;
						height: 18rpx;
						margin-right: 6rpx;
					}

					.t1 {
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.girl {
					background-color: #FF91CF;
				}

				.grading {
					padding: 0 8rpx;
					height: 34rpx;
					text-align: center;
					line-height: 34rpx;
					background: #9D5EF4;
					border-radius: 6rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 16rpx;
				}
			}

			.introduce {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 16rpx;
			}

			.btn {
				margin-top: 24rpx;

				text {
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 60rpx;
					padding: 10rpx 32rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
